<?xml version="1.0" encoding="UTF-8" ?>
<!--

    ﻿Copyright (C) 2009-2013 NewMain Softech

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
    either express or implied. See the License for the specific language
    governing permissions and limitations under the License.

-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>StyleChanger</title>
</head>
<body>
<h3>StyleChanger</h3>
<p><h4>Introduction</h4>
StyleChanger components provide the means of dynamically changing CSS style.<br />
It comes with the 2 out-of-box implementations:
<ul>
	<li><a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.html"
		><code>SimpleStyleProgressiveChanger class</code></a><br />
		As its name implies, the <code>SimpleStyleProgressiveChanger</code> can be used to make rather 
		simple dynamic style change(s). The style changes being able to be performed are defined and 
		limited as the arguments of the overloaded <code>addChangeStyleEntry</code> methods what register 
		the style change data.
	</li>
	<li><a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/style/css/CssStyleChangerBySelector.html"
		><code>CssStyleChangerBySelector class</code></a><br />
		With <code>CssStyleChangerBySelector</code>, more flexible and complex style change can be 
		performed dynamically because of its format defining style change data. 
		Also <code>CssStyleChangerBySelector</code> reads the style change data directly from 
		the hosted web page. 
	</li>
</ul>
</p>
<p><h4>Usage guide</h4>
<ul>
	<li>For <code>SimpleStyleProgressiveChanger</code> case
		<ol>
			<li>Create an instance of <code>SimpleStyleProgressiveChanger</code> class in 
				your GWT client code.<br />
				<ul>
					<li>The reversable argument specifies whether keep repeating style change once it has 
						been completed.
					</li>
					<li>The repeat argument specifies whether style change will be started over once it is 
						completed.
					</li>
				</ul>
				<blockquote>
					<code>
						SimpleStyleProgressiveChanger simpleStyleProgressiveChanger <br />
						= new SimpleStyleProgressiveChanger( false, false);
					</code>
				</blockquote>
			</li>
			<li>Register the style change data by using the overloaded <code>addChangingStyleEntry</code> 
				methods necessary times.
				<blockquote>
					<code>
						simpleStyleProgressiveChanger<br />
						.addChangingStyleEntry( "styleEntry1", "color", 0, 0xecdc0e, true);
					</code>
				</blockquote>
			</li>
			<li>Set the period and the interval.
				<ul>
					<li>The period is set by the <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.html#setPeriod(int)"
						><code>setPeriod</code></a> method.
					</li>
					<li>The interval is set by the <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.html#setInterval(int)"
						><code>setInterval</code></a> method.
					</li>
				</ul> 
				The registered style(s) will be changed at interval by the degree calculated by dividing 
				the difference of the initial style value and the end style value by the interval count.
				<blockquote>
					<code>
						simpleStyleProgressiveChanger.setPeriod( 500);<br />
						simpleStyleProgressiveChanger.setInterval( 100);
					</code>
				</blockquote>
			</li>
			<li>Set the type of style change by calling <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.html#setChangeEventType(ChangeEventType)"
				><code>setChangeEventType</code></a> method.<br />
				The <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.ChangeEventType.html"
				><code>ChangeEventType</code></a>, what is type of argument of <code>setChangeEventType</code> 
				method, defines how to process the progressive change especially when multiple style change 
				data have been registered.
				<blockquote>
					<code>
						simpleStyleProgressiveChanger<br />
						.setChangeEventType( ChangeEventType.OnceAtAll);
					</code>
				</blockquote>
			</li>
			<li>Call <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/SimpleStyleProgressiveChanger.html#processStyleChange()"
				><code>processStyleChange</code></a> method to start the change for the registered style 
				change data.
				<blockquote>
					<code>
						simpleStyleProgressiveChanger.processStyleChange();
					</code>
				</blockquote>
			</li>
		</ol>
	</li>
	<li>For <code>CssStyleChangerBySelector</code> case
		<ol>
			<li>Create the style change data by referring to the example at <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/style/css/CssStyleChangerBySelector.html"
				><code>CssStyleChangerBySelector JavaDoc page</code></a>, and define it in your web page.
			</li>
			<li>In your GWT client code, create an instance of <code>CssStyleChangerBySelector</code> 
				class.<br />
				When the constructor of <code>CssStyleChangerBySelector</code> class is called, it loads 
				the style change data from the hosting web page. 
			</li>
			<li>Call <a href="https://gwetons.googlecode.com/svn/site/apidocs/com/newmainsoftech/gwetons/client/style/css/CssStyleChangerBySelector.html#startStyleChanges()"
				><code>CssStyleChangerBySelector.startStyleChanges()</code></a> method to start dynamic 
				style change progressively.
			</li>
		</ol>
	</li>
</ul>
</p>
</body>
</html>